<template>
  <div class="common_login_body">
    <div class="common_login_section">
      <div class="common_login_top">
        <i class="common_top_logo"></i>
      </div>
      <div class="common_main">
        <!--下面的内容自由发挥-->
        <ul id="input_list">
          <li>
            <span><i class="iconfont icon-qc-required"></i>公司名称</span>
            <input type="text" :placeholder="companyName_holder" autocomplete="off" disableautocomplete v-model="companyName" :class="{'error':!companyNameCheck}">
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>所在地区</span>
            <div id="area_box">
              <input type="text" :placeholder="zone_holder" autocomplete="off" disableautocomplete  readonly @click="areaBox" v-model="zone" :class="{'error':!zoneCheck}">
              <i id="xiala_logo"></i>
              <div id="hidden_box" v-if="areabox">
                <ul>
                  <li v-if="province_ISchoose"><span>{{province_name}}</span></li>
                  <li v-if="city_ISchoose"><span>{{city_name}}</span></li>
                  <li v-if="area_ISchoose" :class="{active:area_ISclick}"><span>{{area_name}}</span></li>
                </ul>
                <!--<div v-if="province_ISclick">-->
                  <!--<ul class="choose_list">-->
                    <!--<li v-for="(item, index) in province" @click="choose_province(item.provinceid,index,item.province)" :class="{active:province_ISchoose_ed==index}">{{item.province}}</li>-->
                  <!--</ul>-->
                <!--</div>-->
                <!--<div v-if="city_ISclick">-->
                  <!--<ul class="choose_list">-->
                    <!--<li v-for="(item, index) in city" @click="choose_city(item.cityid,index,item.city)" :class="{active:city_ISchoose_ed==index}">{{item.city}}</li>-->
                  <!--</ul>-->
                <!--</div>-->
                <div v-if="area_ISclick">
                  <ul class="choose_list">
                    <li v-for="(item, index) in area" @click="choose_area(item.area)" :class="{active:area_ISchoose_ed==index}">{{item.area}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>联系人</span>
            <input type="text" :placeholder="user_holder" autocomplete="off" disableautocomplete v-model="user" :class="{'error':!userCheck}">
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>手机号</span>
            <input type="number" :placeholder='phone_holder' autocomplete="off" disableautocomplete v-model="phone" :class="{'error':!phoneCheck}">
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>验证码</span>
            <input type="number" :placeholder="yzm_holder" autocomplete="off" disableautocomplete id="yzm" v-model="yzm" :class="{'error':!yzmCheck}">
            <button id="yzm_btn" @click="getYzm">{{yzm_text}}</button>
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>密码</span>
            <input type="password" :placeholder="pwd_holder" autocomplete="off" disableautocomplete v-model="pwd" :class="{'error':!pwdCheck}">
          </li>
        </ul>
        <p id="link_list">
          <span>已有账号，<a @click="linkTOlogin">立即登录</a></span>
        </p>
        <!--按钮也是公共的-->
        <button class="common_login_btn" @click="register">注册</button>
        <!------------------->
      </div>
    </div>
    <!--tankuang -->
    <div class="tankuang_box" v-if="tankuangISshow">
      <div class="tankuang">
        <p class="tankuangMSG">{{tankuangMSG}}</p>
        <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
  import lu from '@/assets/public.js'
  export default {
    name: 'register',
    data () {
      return {
        companyName:'',
        companyName_holder:'请输入公司名称',
        companyNameCheck: true,
        zone:'',
        zone_holder:'请选择地区',
        zoneCheck: true,
        cityID:'',
        user:'',
        user_holder:'请输入联系人姓名',
        userCheck: true,
        phone:'',
        phone_holder:'请输入手机号',
        phoneCheck: true,
        yzm:'',
        yzm_holder:'请输入验证码',
        yzmCheck: true,
        yzm_text:'获取验证码',
        pwd:'',
        pwd_holder:'密码包含大小写字母和数字',
        pwdCheck: true,
//        province:[],/*省数组*/
//        city:[],/*市数组*/
        area:[],/*区数组*/
        province_name:'安徽省',/*写在三个盒子的tab标签上面的省的名字*/
        city_name:'阜阳市',
        area_name:'请选择',
        province_ISchoose:true,/*判断省是否被选择，如果被选择，则tab对应的省的盒子隐藏。跳到下一个市的盒子进行选择*/
//        province_ISclick:true,/*判断省是否被点击，如果被点击，则tab对应的省的盒子显示。*/
        province_ISchoose_ed:0,/*判断省被选择的省的id，如果已经被选择，给予对应的被选择样式，跳到下一个市的盒子进行选择。*/
        city_ISchoose:true,
//        city_ISclick:true,
        city_ISchoose_ed:0,
        area_ISchoose:true,
        area_ISclick:true,
        area_ISchoose_ed:0,
        areabox: false, /*地区选择的盒子是否显示*/
        tankuangISshow:false,
        tankuangMSG:'',
        Interval:'',
        seconds:60,
        yzmISclick:false
      }
    },
    mounted: function() {
//      this.axios.get('/index/get_province').then((res)=>{
//        this.province = res.data.data
//      })
      this.axios.get('/index/get_area?cid=341200').then((res)=>{
//        this.area_ISchoose = true
//        this.province_ISclick = false
//        this.city_ISclick = false
//        this.area_ISclick = true
        this.area = res.data.data
//        this.cityID = cityID
      })
    },
    methods: {
      /*选择地区*/
      areaBox () {
        this.areabox = !this.areabox
      },
      /*省市区选择*/
//      hidden_box_choose (boxID) {
//        if(boxID==1){
//          this.province_ISclick = true
//          this.city_ISclick = false
//          this.area_ISclick = false
//        }else if(boxID==2){
//          this.province_ISclick = false
//          this.city_ISclick = true
//          this.area_ISclick = false
//        }else if(boxID==3){
//          this.province_ISclick = false
//          this.city_ISclick = false
//          this.area_ISclick = true
//        }
//      },
      /*选择省*/
//      choose_province (provinceID,index,name) {
//        this.province_ISchoose_ed = index
//        this.province_name = name
//        this.city_name = '请选择'
//        this.area_ISclick = false
//        this.area_ISchoose = false
//        this.axios.get('/index/get_city?pid='+provinceID).then((res)=>{
//          this.city_ISchoose = true
//          this.province_ISclick = false
//          this.city_ISclick = true
//          this.city = res.data.data
//        })
//      },
//      /*选择市*/
//      choose_city (cityID,index,name) {
//        this.city_ISchoose_ed = index
//        this.city_name = name
//        this.area_name = '请选择'
//        this.axios.get('/index/get_area?cid='+cityID).then((res)=>{
//          this.area_ISchoose = true
//          this.province_ISclick = false
//          this.city_ISclick = false
//          this.area_ISclick = true
//          this.area = res.data.data
//          this.cityID = cityID
//        })
//      },
      /*选择区/县*/
      choose_area (name) {
        this.area_name = name
        this.areabox = false
        let str = this.province_name+','+this.city_name+','+this.area_name
        this.zone = lu.textEach(str,13)
      },
      /*跳转到登录*/
      linkTOlogin () {
        this.$router.push({
          path: '/login',
          name: 'login',
          params: {
            name: 'login'
          }
        })
      },
      check (type) {
//        console.log(1)
//        if(type=='phone'){
//
//        }else if(type=='pwd'){
//          if(!lu.regCheck(this.pwd,/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/)){
//            console.log('cuole')
//          }else{
//            console.log('duile')
//          }
//        }
      },
      /*注册*/
      register () {
        if(!this.companyName){
          this. companyNameCheck = false
          this.companyName_holder = '公司名不得为空'
          return
        }else if(!this.zone) {
          this.zoneCheck = false
          this.zone_holder = '地区选择不得为空'
          return
        }else if(!this.user) {
          this.userCheck = false
          this.user_holder = '联系人不得为空'
          return
        }else if(!this.phone) {
          this.phoneCheck = false
          this.phone_holder = '手机号不得为空'
          return
        }else if(!this.yzm) {
          this.yzmCheck = false
          this.yzm_holder = '验证码不得为空'
          return
        }else if(!this.pwd) {
          this.pwdCheck = false
          this.pwd_holder = '密码不得为空'
          return
        }
        if(!lu.regCheck(this.phone,/^1[3457869]{1}\d{9}$/)){
          this.phone = ''
          this.phoneCheck = false
          this.phone_holder = '请输入正确的手机号'
          return
        }else if(!lu.regCheck(this.pwd,/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,30}$/)){
          this.pwd = ''
          this.pwdCheck = false
          this.phone_holder = '6-30位包含字母和数字'
          return
        }
        this. companyNameCheck = true
        this.zoneCheck = true
        this.userCheck = true
        this.phoneCheck = true
        this.yzmCheck = true
        this.pwdCheck = true

        this.axios.post('/index/register',{
          com_name:this.companyName,
          city_id:'341200',
          user_name:this.user,
          user_phone:this.phone,
          password:this.pwd,
          code:this.yzm,
          com_area:this.province_name+'-'+this.city_name+'-'+this.area_name
        }).then((res)=>{
          clearInterval(this.Interval)
          this.yzm_text = '获取验证码'
          this.yzmISclick = false
          if(res.data.code==0){
            this.tankuangMSG = res.data.msg
            this.tankuangISshow = true
          }else{
            // this.$router.push({
            //   path: '/login',
            //   name: 'login',
            //   params: {
            //     name: 'login'
            //   }
            // })
            this.axios.post('/index/login',{
              user_phone:this.phone,
              password:this.pwd
            }).then((res)=>{
              if(res.data.code==1){
                this.$store.commit('login',true)
                this.$router.push({
                  path: '/Index',
                  name: 'Index',
                  params: {
                    name: 'Index'
                  }
                })
              }else{
                this.tankuangMSG = res.data.msg
                this.tankuangISshow = true
              }
            })
          }
        })
      },
//      点击确认关闭弹框
      tankuangISshowBTN(){
        this.tankuangISshow = !this.tankuangISshow
      },
//      获取验证码
      getYzm () {
        if(this.yzmISclick)return
        if(!this.phone){
          this.phoneCheck = false
          this.phone_holder = '手机号不得为空'
        }else{
          let that = this
          this.yzmISclick = true
          this.axios.get('/index/get_code?situation=1&phone='+this.phone).then((res)=>{
            this.Interval = setInterval(function(){
              that.seconds = that.seconds - 1
              if(that.seconds<=0){
                clearInterval(that.Interval)
                that.yzmISclick = false
              }else{
                that.yzm_text = that.seconds+'s'
              }
            },1000)
            if(res.data.code==0){
//              console.log(10)
              clearInterval(that.Interval)
              this.yzmISclick = false
              this.phone = ''
              this.phoneCheck = false
              this.phone_holder = res.data.msg
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_6g1sjwpn827.css';
  .common_login_section{
    height:650px;
    overflow: visible;
  }
  #input_list{
    width:396px;
    margin:40px auto 0;
  }
  #input_list>li{
    height:40px;
    display: flex;
    align-items: center;
    margin-bottom:16px;
    box-sizing: border-box;
    position: relative;
  }
  #input_list>li>span{
    font-size:14px;
    color: #666;
    display: inline-block;
    width:100px;
    text-align: right;
    padding-right:10px;
    box-sizing: border-box;
  }
  #input_list>li>span i{
    color: #ff0000;
  }
  #input_list>li input{
    display: inline-block;
    vertical-align: middle;
    width:296px;
    height:40px;
    outline: none;
    border: 1px solid #ddd;
    font-size:15px;
    color: #444444;
    background-color: transparent;
    padding:0 0 0 10px;
    box-sizing: border-box;
  }
  #yzm{
    width:186px!important;
  }
  #yzm_btn{
    width:97px;
    height:36px;
    background-color: #2377BA;
    color:#fff;
    font-size:15px;
    margin-left:11px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
  }
  #link_list:after{
    content: '';
    display: block;
    clear: both;
  }
  #link_list{
    width:416px;
    margin:0 auto;
    text-align: center;
  }
  #link_list>span{
    color: #666;
    font-size:11px;
    display: inline-block;
    line-height: 63px;
  }
  #link_list>span>a{
    color: #2377BA;
    font-size:11px;
    display: inline-block;
    line-height: 63px;
    cursor: pointer;
  }

  #area_box{
    position: relative;
    width:296px;
    box-sizing: border-box;
    padding:0;
    margin:0;
  }
  #area_box #xiala_logo{
    position: absolute;
    width:15px;
    height:8px;
    right:26px;
    top:50%;
    transform: translateY(-50%);
    background: url("img/xiala.png");
  }
  #hidden_box{
    width:600px;
    position: absolute;
    top:39px;
    left:0;
    z-index: 5;
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  #hidden_box>ul{
    height:36px;
    border-bottom:1px solid #2377BA;
    display: flex;
    align-items: flex-end;
  }
  #hidden_box>ul>li{
    margin-left:5px;
    /*width:83px;*/
    padding:0 15px;
    height:30px;
    vertical-align: middle;
    line-height: 30px;
    border-top: 1px solid #2377BA;
    border-left: 1px solid #2377BA;
    border-right: 1px solid #2377BA;
    background-color: #fff;
  }
  #hidden_box>ul>li>span{
    color: #333;
    font-size:15px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    /*line-height: 100%;*/
    width:100%;
    height:100%;
  }
  #hidden_box>ul>li.active{
    background-color: #2377BA;
  }
  #hidden_box>ul>li.active>span{
    color: #fff;
  }
  .choose_list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding:10px;
  }
  .choose_list>li{
    padding:6px 15px;
    white-space: nowrap;
    cursor: pointer;
    color: #333;
    font-size:16px;
    background-color: #fff;
  }
  .choose_list>li.active{
    background-color: #2377BA;
    color: #fff;
  }
</style>
